<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>运输跟踪 - 雁农冷链平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../../static/kj/vue.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }
        
        .container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .page-desc {
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .search-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .search-row {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .search-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .search-label {
            font-weight: bold;
            color: #34495e;
            min-width: 80px;
        }
        
        .form-control {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            min-width: 150px;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background-color: #3498db;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
        }
        
        .btn-success {
            background-color: #27ae60;
            color: white;
        }
        
        .btn-success:hover {
            background-color: #229954;
        }
        
        .btn-warning {
            background-color: #f39c12;
            color: white;
        }
        
        .btn-warning:hover {
            background-color: #e67e22;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .stat-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }
        
        .stat-title {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 5px;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .transport-list {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .list-header {
            background: #34495e;
            color: white;
            padding: 15px 20px;
            font-weight: bold;
        }
        
        .transport-item {
            border-bottom: 1px solid #eee;
            padding: 20px;
            transition: background-color 0.3s;
        }
        
        .transport-item:hover {
            background-color: #f8f9fa;
        }
        
        .transport-item:last-child {
            border-bottom: none;
        }
        
        .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .item-title {
            font-size: 16px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .item-status {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-shipping {
            background-color: #3498db;
            color: white;
        }
        
        .status-arrived {
            background-color: #27ae60;
            color: white;
        }
        
        .status-delayed {
            background-color: #e74c3c;
            color: white;
        }
        
        .status-preparing {
            background-color: #f39c12;
            color: white;
        }
        
        .item-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }
        
        .detail-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .detail-label {
            font-weight: bold;
            color: #7f8c8d;
            min-width: 80px;
        }
        
        .detail-value {
            color: #2c3e50;
        }
        
        .progress-section {
            margin-top: 15px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 6px;
        }
        
        .progress-title {
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .progress-timeline {
            display: flex;
            align-items: center;
            gap: 10px;
            overflow-x: auto;
            padding: 10px 0;
        }
        
        .progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 120px;
            text-align: center;
        }
        
        .step-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-bottom: 8px;
        }
        
        .step-completed {
            background-color: #27ae60;
            color: white;
        }
        
        .step-current {
            background-color: #3498db;
            color: white;
        }
        
        .step-pending {
            background-color: #bdc3c7;
            color: white;
        }
        
        .step-text {
            font-size: 12px;
            color: #7f8c8d;
        }
        
        .step-time {
            font-size: 11px;
            color: #95a5a6;
            margin-top: 2px;
        }
        
        .step-connector {
            width: 30px;
            height: 2px;
            background-color: #bdc3c7;
            margin: 0 5px;
        }
        
        .step-connector.completed {
            background-color: #27ae60;
        }
        
        .item-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }
        
        .alert {
            padding: 12px 15px;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        
        .alert-info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <!-- 页面标题 -->
        <div class="page-header">
            <div class="page-title">🚛 运输跟踪</div>
            <div class="page-desc">实时跟踪货物运输状态，掌握物流动态信息</div>
        </div>
        
        <!-- 搜索条件 -->
        <div class="search-section">
            <div class="search-row">
                <div class="search-item">
                    <label class="search-label">运单号:</label>
                    <input v-model="searchForm.trackingNo" class="form-control" placeholder="请输入运单号">
                </div>
                <div class="search-item">
                    <label class="search-label">运输状态:</label>
                    <select v-model="searchForm.status" class="form-control">
                        <option value="">全部状态</option>
                        <option value="preparing">准备中</option>
                        <option value="shipping">运输中</option>
                        <option value="arrived">已到达</option>
                        <option value="delayed">延误</option>
                    </select>
                </div>
                <div class="search-item">
                    <label class="search-label">时间范围:</label>
                    <select v-model="searchForm.timeRange" class="form-control">
                        <option value="today">今日</option>
                        <option value="week">本周</option>
                        <option value="month">本月</option>
                    </select>
                </div>
                <button @click="searchTransports" class="btn btn-primary">🔍 查询</button>
                <button @click="refreshData" class="btn btn-success">🔄 刷新</button>
            </div>
        </div>
        
        <!-- 统计卡片 -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon">📦</div>
                <div class="stat-title">总运单数</div>
                <div class="stat-value">{{ stats.totalOrders }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">🚛</div>
                <div class="stat-title">运输中</div>
                <div class="stat-value">{{ stats.shippingCount }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">✅</div>
                <div class="stat-title">已到达</div>
                <div class="stat-value">{{ stats.arrivedCount }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">⚠️</div>
                <div class="stat-title">延误</div>
                <div class="stat-value">{{ stats.delayedCount }}</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">🌡️</div>
                <div class="stat-title">平均温度</div>
                <div class="stat-value">{{ stats.avgTemp }}°C</div>
            </div>
        </div>
        
        <!-- 运输提醒 -->
        <div class="alert alert-info">
            🔔 <strong>提示：</strong>运输信息每15分钟更新一次，如有紧急情况请及时联系物流客服
        </div>
        
        <!-- 运输列表 -->
        <div class="transport-list">
            <div class="list-header">
                🚚 运输跟踪列表
            </div>
            
            <div v-for="item in transportList" :key="item.id" class="transport-item">
                <!-- 运单头部信息 -->
                <div class="item-header">
                    <div class="item-title">运单号: {{ item.trackingNo }}</div>
                    <div class="item-status" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</div>
                </div>
                
                <!-- 运单详细信息 -->
                <div class="item-details">
                    <div class="detail-item">
                        <span class="detail-label">🏭 发货地:</span>
                        <span class="detail-value">{{ item.origin }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">🏪 目的地:</span>
                        <span class="detail-value">{{ item.destination }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">📦 货物:</span>
                        <span class="detail-value">{{ item.goods }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">⚖️ 重量:</span>
                        <span class="detail-value">{{ item.weight }}kg</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">🌡️ 当前温度:</span>
                        <span class="detail-value">{{ item.temperature }}°C</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">🚛 车牌号:</span>
                        <span class="detail-value">{{ item.vehicleNo }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">👨‍💼 司机:</span>
                        <span class="detail-value">{{ item.driver }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">📱 联系电话:</span>
                        <span class="detail-value">{{ item.phone }}</span>
                    </div>
                </div>
                
                <!-- 运输进度 -->
                <div class="progress-section">
                    <div class="progress-title">🛣️ 运输进度</div>
                    <div class="progress-timeline">
                        <div v-for="(step, index) in item.progress" :key="index" class="progress-step">
                            <div class="step-icon" :class="getStepClass(step.status)">{{ getStepIcon(step.type) }}</div>
                            <div class="step-text">{{ step.name }}</div>
                            <div class="step-time">{{ step.time }}</div>
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="item-actions">
                    <button @click="viewDetails(item)" class="btn btn-primary">📋 详情</button>
                    <button @click="contactDriver(item)" class="btn btn-success">📞 联系司机</button>
                    <button @click="viewRoute(item)" class="btn btn-warning">🗺️ 路线</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                searchForm: {
                    trackingNo: '',
                    status: '',
                    timeRange: 'week'
                },
                stats: {
                    totalOrders: 156,
                    shippingCount: 23,
                    arrivedCount: 128,
                    delayedCount: 5,
                    avgTemp: '-2.5'
                },
                transportList: [
                    {
                        id: 1,
                        trackingNo: 'HY202401001',
                        status: 'shipping',
                        origin: '衡阳蒸湘冷链仓库',
                        destination: '长沙生鲜市场',
                        goods: '衡阳湘莲',
                        weight: 2500,
                        temperature: 4.2,
                        vehicleNo: '湘D·12345',
                        driver: '张师傅',
                        phone: '138****1234',
                        progress: [
                            { type: 'start', name: '发货', status: 'completed', time: '08:00' },
                            { type: 'transit', name: '运输中', status: 'current', time: '12:30' },
                            { type: 'arrive', name: '到达', status: 'pending', time: '--' }
                        ]
                    },
                    {
                        id: 2,
                        trackingNo: 'HY202401002',
                        status: 'arrived',
                        origin: '衡阳祁东黄花菜基地',
                        destination: '广州农产品批发市场',
                        goods: '衡阳黄花菜',
                        weight: 1800,
                        temperature: 6.1,
                        vehicleNo: '湘D·67890',
                        driver: '李师傅',
                        phone: '139****5678',
                        progress: [
                            { type: 'start', name: '发货', status: 'completed', time: '06:00' },
                            { type: 'transit', name: '运输中', status: 'completed', time: '09:15' },
                            { type: 'arrive', name: '到达', status: 'completed', time: '14:20' }
                        ]
                    },
                    {
                        id: 3,
                        trackingNo: 'HY202401003',
                        status: 'delayed',
                        origin: '衡阳南岳茶油加工厂',
                        destination: '武汉超市配送中心',
                        goods: '衡阳茶油',
                        weight: 1200,
                        temperature: 18.5,
                        vehicleNo: '湘D·11111',
                        driver: '王师傅',
                        phone: '137****9999',
                        progress: [
                            { type: 'start', name: '发货', status: 'completed', time: '07:30' },
                            { type: 'transit', name: '运输中', status: 'current', time: '11:00' },
                            { type: 'arrive', name: '到达', status: 'pending', time: '--' }
                        ]
                    },
                    {
                        id: 4,
                        trackingNo: 'HY202401004',
                        status: 'shipping',
                        origin: '衡阳珠晖生鲜市场',
                        destination: '深圳便民超市',
                        goods: '衡阳土鸡蛋',
                        weight: 800,
                        temperature: 5.2,
                        vehicleNo: '湘D·33333',
                        driver: '陈师傅',
                        phone: '135****7777',
                        progress: [
                            { type: 'start', name: '发货', status: 'completed', time: '09:00' },
                            { type: 'transit', name: '运输中', status: 'current', time: '13:45' },
                            { type: 'arrive', name: '到达', status: 'pending', time: '--' }
                        ]
                    },
                    {
                        id: 5,
                        trackingNo: 'HY202401005',
                        status: 'preparing',
                        origin: '衡阳雁峰水果基地',
                        destination: '郵阳水果市场',
                        goods: '衡阳白萄萄',
                        weight: 1500,
                        temperature: 8.0,
                        vehicleNo: '湘D·88888',
                        driver: '刘师傅',
                        phone: '136****6666',
                        progress: [
                            { type: 'start', name: '发货', status: 'current', time: '--' },
                            { type: 'transit', name: '运输中', status: 'pending', time: '--' },
                            { type: 'arrive', name: '到达', status: 'pending', time: '--' }
                        ]
                    }
                ]
            },
            methods: {
                searchTransports() {
                    alert('正在查询运输信息...');
                    // 这里可以添加实际的查询逻辑
                },
                refreshData() {
                    alert('正在刷新数据...');
                    // 这里可以添加刷新逻辑
                },
                viewDetails(item) {
                    alert(`查看运单 ${item.trackingNo} 的详细信息`);
                    // 这里可以跳转到详情页面
                },
                contactDriver(item) {
                    alert(`联系司机 ${item.driver}：${item.phone}`);
                    // 这里可以添加联系司机的功能
                },
                viewRoute(item) {
                    alert(`查看运单 ${item.trackingNo} 的运输路线`);
                    // 这里可以显示地图路线
                },
                getStatusClass(status) {
                    const classMap = {
                        'preparing': 'status-preparing',
                        'shipping': 'status-shipping',
                        'arrived': 'status-arrived',
                        'delayed': 'status-delayed'
                    };
                    return classMap[status] || 'status-preparing';
                },
                getStatusText(status) {
                    const textMap = {
                        'preparing': '准备中',
                        'shipping': '运输中',
                        'arrived': '已到达',
                        'delayed': '延误'
                    };
                    return textMap[status] || '未知';
                },
                getStepClass(status) {
                    const classMap = {
                        'completed': 'step-completed',
                        'current': 'step-current',
                        'pending': 'step-pending'
                    };
                    return classMap[status] || 'step-pending';
                },
                getStepIcon(type) {
                    const iconMap = {
                        'start': '🏭',
                        'transit': '🚛',
                        'arrive': '🏪'
                    };
                    return iconMap[type] || '📍';
                }
            },
            mounted() {
                // 页面加载完成后的初始化操作
                console.log('运输跟踪页面已加载');
            }
        });
    </script>
</body>
</html>